<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩表</title>
    <!--2 引入element ui css样式-->
    <!--2.1 引入element ui-->
    <link rel="stylesheet" href="../../public/element-ui/index.css">
    <style>
        .el-collapse-item__header {
            background-color: whitesmoke;
        }
    </style>
</head>
<body>
<!--3 创建div容器,挂载vue实例-->
<div id="app">
    <el-card class="box-card">
        <template v-for="(item,index) in tableData" :key="index">
            <el-collapse>
                <el-collapse-item>
                    <template slot="title">
                        <i class="el-icon-trophy" style="margin-left: 10px ;margin-right: 5px"></i>
                        <div style="padding-right: 86%">通告{{index+1}}&nbsp;来自裁判员：{{item.author}}</div>
                        <el-button type="primary" icon="el-icon-delete" size="small" @click="del(index)"></el-button>
                    </template>
                    <template slot="name">{{item.id}}</template>
                    <el-card class="box-card">
                        <div>比赛项目名称：{{item.comment}}</div>
                    </el-card>
                    <div style="float: right"><h6 style="color: red">获奖情况：{{item.score}}</h6></div>
                </el-collapse-item>
            </el-collapse>
        </template>
        <div style="float: right ;padding: 6px 0">
            <template >
                <el-button type="text" @click="open()">点击添加赛后成绩</el-button>
            </template>
        </div>
    </el-card>

<!--    添加比赛成绩-->
    <el-dialog width="40%"
               :title="dialog.title"
               :visible.sync="dialog.show"
               :close-on-click-modal='false'
               :close-on-press-escape='false'
               :modal-append-to-body='false'
               :show-close='false'>
        <el-form ref="myform" :model="mymodel" label-width="100px">
            <el-form-item label="ID：" prop="id" hidden>
                <el-input v-model="mymodel.id"></el-input>
            </el-form-item>
            <el-form-item label="比赛项目名称：" prop="comment" >
                <el-input v-model="mymodel.comment"></el-input>
            </el-form-item>
            <el-form-item label="获奖情况：" prop="score">
                <el-input v-model="mymodel.score"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" round size="small" @click="onSubmitAdd()">保存</el-button>
                <el-button type="danger" round size="small" @click="dialog.show = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>

<!--1 从本地引入js库 锁定版本-->
<!--1.1 引入vue-->
<script src="../../public/vue/vue.min.js"></script>
<!--1.2 引入element ui-->
<script src="../../public/element-ui/index.js"></script>
<!--1.3 引入 axios-->
<script src="../../public/axios/axios.min.js"></script>
<!--1.4 引入 自定义js包-->
<script src="../../public/mx-config.js"></script>

<script>
    //4 创建vue实例
    const app = new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [],
                //控制对话框
                dialog: {
                    title: '',
                    show: false,
                },
                //定义模型，与表单匹配
                mymodel: {
                    id:'',
                    uid:'',
                    comment:'',
                    score:'',
                },
                //设置一个变量，保存哪行数据被选中了
                selectItemIndex: -1
            }
        },
        mounted: function () {
            this.initTable()
        },
        methods: {
            initTable: function () {
                axios.get("/scoreList").then(res => {
                    if (res.status == '200') {
                        this.tableData = res.data;
                        console.log(this.tableData)
                    } else {
                        console.log('get error')
                    }
                })
            },
            //响应添加按钮
            open: function () {
                //清空表单
                this.mymodel = {
                    id:'',
                    uid:'',
                    comment:'',
                    score:'',
                };
                this.dialog.title = "添加比赛成绩";
                this.dialog.show = true;
            },
            //保存按钮
            onSubmitAdd: function(){
                axios.post('/scoreList/',this.mymodel).then(res=>{
                    if (res.status == '200'){
                        //更新列表
                        this.tableData.push(res.data);
                        this.initTable();
                    }else{
                        console.log("post error")
                    }
                });
                this.mymodel = {
                    id:'',
                    uid:'',
                    comment:'',
                    score:'',
                },
                this.dialog = {
                    show : false,
                    title : '',
                }
            },
            //响应删除按钮
            del: function (index) {
                //删除被选中的数据
                this.$confirm('确认删除该数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 删除
                    let id = this.tableData[index].id;
                    axios.delete("/scoreList/" + id).then(res => {
                        if (res.data == 200) {
                            this.$message("删除成功");
                            // 删除table起始下标为1，长度为1的一个值
                            this.tableData.splice(index, 1);
                        }
                    });
                }).catch(() => {

                });

            }
        }
    });

</script>
</body>
</html>